import React, {Fragment} from "react";
import {getLakeInfo} from '../../../service/api';
import Trees from '../../../components/Trees/Trees';
import { Table, Button, Form, Input, Modal, Row, Col } from 'antd';
const FormItem = Form.Item;

class AddLakeInfo extends React.Component {

    state = {
        visible: false,
        confirmLoading: false
    }

    showModal = () => {
        this.setState({
            visible: true
        });
    }

    handleCancel = () => {
        this.props.form.resetFields();
        this.setState({
            visible: false,
            confirmLoading: false
        });
    }

    render() {
        const {visible, confirmLoading} = this.state;
        const {getFieldDecorator} = this.props.form;
        return (
            <Fragment>
                <Button className="fl addNew formAddBtn" type="primary" onClick={this.showModal}>新增</Button>
                <Modal title="新增湖泊信息"
                       visible={visible}
                       maskClosable={false}
                       onOk={this.handleOk}
                       confirmLoading={confirmLoading}
                       onCancel={this.handleCancel}
                       okText="提交"
                       cancelText="取消"
                       width="80%"
                >
                    <Form className="modalForm">
                        <Row type="flex" justify="center" align="top">
                            <Col span={12}>
                                <FormItem label="地区名称">
                                    {getFieldDecorator('regionname',{
                                        initialValue: ""
                                    })(
                                        <Input placeholder="地区名称" />
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={12}>
                                <FormItem label="地区代码">
                                    {getFieldDecorator('regioncode',{
                                        initialValue: ""
                                    })(
                                        <Input placeholder="地区代码" />
                                    )}
                                </FormItem>
                            </Col>
                        </Row>
                    </Form>

                </Modal>
            </Fragment>
        )
    }

}
const AddLakeInfoForm = Form.create()(AddLakeInfo);
const columns = [
    {
        dataIndex: 'id',
        title: 'id',
        width: 80
    },
    {
        dataIndex: 'lakename',
        title: '湖泊名称',
        width: 180
    },
    {
        dataIndex: 'regionname',
        title: '责任主体',
        width: 120
    },
    {
        dataIndex: 'lakelength',
        title: '面积(平方公里)',
        width: 120
    },
    {
        dataIndex: 'chiefid',
        title: '湖长',
        width: 120
    },
    {
        dataIndex: 'rlevel',
        title: '水库级别',
        width: 80
    },
    {
        dataIndex: 'lakebank',
        title: '岸别',
        width: 80
    },
    {
        dataIndex: 'lakestart',
        title: '起始地点',
        width: 100
    },
    {
        dataIndex: 'lakeend',
        title: '终止地点',
        width: 100
    },
    {
        dataIndex: 'stakestart',
        title: '起始桩号',
        width: 100
    },
    {
        dataIndex: 'stakeend',
        title: '终止桩号',
        width: 100
    }
    // {
    //     dataIndex: 'param',
    //     title: '详情',
    //     width: 80,
    //     render: () => (
    //         <span className="getInfo">详情</span>
    //     )
    // }
]

class LakeInfo extends React.Component {

    state = {
        permissions: JSON.parse(localStorage.permissions),
        limit: 20,
        offset: 0,
        lakeName: "",
        regionId: "",
        data: [],
        loading: true,
        pagination: {pageSize: 20},
        height: document.body.clientHeight - 230,
    }

    componentDidMount() {
        this.getData();
    }

    getData = () => {
        let self = this;
        const pagination = { ...this.state.pagination };
        self.setState({loading: true});
        getLakeInfo({
            limit: this.state.limit,
            offset: this.state.offset,
            regionId: this.state.regionId,
            lakeName: this.state.lakeName,
        }).then(function (data) {
            pagination.total = data.data.total;
            if(data.code === 200){
                self.setState({data: data.data.rows, showData: data.data.rows, loading: false, pagination})
            }
        })

    }

    handleTableChange = (pagination, filters, sorter)=> {
        this.setState({loading: true, offset: (pagination.current-1)*pagination.pageSize},function () {
            this.getData();
        })
    }

    getId = (value)=> {
        this.setState({
            regionId: value[0]
        },()=>{
            this.getData()
        })
    }

    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            this.setState({
                lakeName: values.lakeName
            }, () => {
                this.getData();

            })
        })

    }

    render(){
        const { getFieldDecorator } = this.props.form;
        let data = [];
        for(let i in this.state.data){
            data.push({
                key: i,
                id: this.state.data[i].id,
                lakename: this.state.data[i].lakename,
                regionname: this.state.data[i].regionname,
                chiefid: this.state.data[i].chiefid,
                rlevel: this.state.data[i].rlevel,
                lakebank: this.state.data[i].lakebank,
                reservoirend: this.state.data[i].reservoirend,
                lakestart: this.state.data[i].lakestart,
                lakeend: this.state.data[i].lakeend,
            })
        }

        return(
            <div className="clearfix hezhangInfo page">
                <div className="treeArea">
                    <Trees getId={this.getId} />
                </div>
                <div className="mt10 tableArea">
                    <div className="clearfix tableFilter">
                        <Form className="fl searchForm" layout="inline" onSubmit={this.handleSubmit}>
                            <FormItem>
                                {getFieldDecorator('lakeName',{
                                    initialValue: ""
                                })(
                                    <Input placeholder="湖泊名称" />
                                )}
                            </FormItem>

                            <FormItem>
                                <Button
                                    type="primary"
                                    htmlType="submit"
                                >
                                    查询
                                </Button>
                            </FormItem>
                        </Form>
                        {this.state.permissions["sys:rivers:add"]?<AddLakeInfoForm retrieve={this.getData} />:true}
                    </div>
                    <Table className="mt10 scrollTable" columns={columns} dataSource={data} loading={this.state.loading} pagination={this.state.pagination} onChange={this.handleTableChange} scroll={{x: 1100,y: this.state.height }} bordered />
                </div>
            </div>
        )
    }

}
const LakeInfoForm = Form.create()(LakeInfo);
export default LakeInfoForm;